import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {observable, action} from "mobx";

@observer
class BaseVerify extends Component {
    constructor(props) {
        super(props);
        // this.studentVerifyModel = this.props.store.getModel();
        this.RecordFreeUser = this.props.store.getRecordFreeUser();
    }

    @action handleChange = e => {
        switch (e.target.name) {
            case "name" :
                // this.studentVerifyModel.name = e.target.value;
                this.RecordFreeUser.name = e.target.value;
                break;
            case "graudateYear":
                // this.studentVerifyModel.graduateYear = e.target.value;
                this.RecordFreeUser.graudateYear = e.target.value;
                break;
            case "marjorName" :
                // this.studentVerifyModel.majorName = e.target.value;
                this.RecordFreeUser.marjorName = e.target.value;
                break;
            case "idNum" :
                // this.studentVerifyModel.idNum = e.target.value;
                this.RecordFreeUser.idNum = e.target.value;
                break;
            case "mateName":
                // this.studentVerifyModel.contact = e.target.value;
                this.RecordFreeUser.mateName = e.target.value;
                break;
            case "classes":
                // this.studentVerifyModel.classes = e.target.value;
                this.RecordFreeUser.classes = e.target.value;
                break;
        }
    };

    isEmpty = (obj) => {
        for (var name in obj) {
            return false;
        }
        return true;
    };

    verifySubmit = () => {
        const {name, graudateYear, marjorName,classes,idNum,mateName} = this.RecordFreeUser;
        if (this.isEmpty(name)) {
            alert("姓名不能为空");
            return;
        }
        if (this.isEmpty(graudateYear)) {
            alert("请选择毕业年份");
            return;
        }
        if (this.isEmpty(marjorName)) {
            alert("请选择专业");
            return;
        }
        if (this.isEmpty(classes)) {
            alert("班级不能为空");
            return;
        }
        if (this.isEmpty(idNum)) {
            alert("身份证号不能为空");
            return;
        }
        if (this.isEmpty(mateName)) {
            alert("同学姓名不能为空");
            return;
        }
        // this.props.store.setModel(this.studentVerifyModel);
        this.props.store.setRecordFreeUser(this.RecordFreeUser);
        // this.props.store.studentVerify(this.studentVerifyModel);
        this.props.store.studentVerify(this.RecordFreeUser);
    };

    render() {
        const {name, graudateYear, marjorName, classes,idNum, mateName} = this.props.store.RecordFreeUser;
        return (
            <div>
                <h2>身份验证</h2>
                <div>
                    <label><span>*</span>姓名：<input name="name" type="text" value={name} onChange={this.handleChange}/>
                    </label>
                </div>
                <div>
                    <label><span>*</span>毕业年份：
                        <select value={graudateYear} name="graudateYear" onChange={this.handleChange}>
                            <option value="" selected>--请选择毕业年份--</option>
                            <option value="2006">2006</option>
                            <option value="2007">2007</option>
                            <option value="2008">2008</option>
                            <option value="2009">2009</option>
                            <option value="2010">2010</option>
                            <option value="2011">2011</option>
                            <option value="2012">2012</option>
                            <option value="2013">2013</option>
                            <option value="2014">2014</option>
                            <option value="2015">2015</option>
                            <option value="2016">2016</option>
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                        </select>
                    </label>
                </div>
                <div>
                    <label><span>*</span>专业：
                        <select value={marjorName} name="marjorName" onChange={this.handleChange}>
                            <option value="" selected>--请选择专业--</option>
                            <option value="计算机科学与技术">计算机科学与技术</option>
                            <option value="网络工程">网络工程</option>
                            <option value="物联网工程">物联网工程</option>
                            <option value="信息安全">信息安全</option>
                            <option value="软件工程">软件工程</option>
                        </select>
                    </label>
                </div>
                <div>
                    <label><span>*</span>班级：<input name="classes" type="text" value={classes} placeholder="如：16计算机3班" onChange={this.handleChange}/>
                    </label>
                </div>
                <div>
                    <label><span>*</span>身份证号：<input name="idNum" type="text" value={idNum} onChange={this.handleChange}/>
                    </label>
                </div>
                <div>
                    <label><span>*</span>同学姓名：
                        <input name="mateName" type="text" value={mateName} onChange={this.handleChange}/>
                    </label>
                </div>
                <button onClick={this.verifySubmit}>下一步</button>
            </div>
        );
    }
}

export default observer(BaseVerify);
